<template>
	<div class="content">
		<el-form ref="form" :model="siteContentFormData" label-width="80px">
			<el-form-item label="第一屏">
			</el-form-item>
			<el-form-item label="主图">
				<template slot-scope="scope">
					<image-upload v-model="siteContentFormData.configValue.firstScreen.mainImg" :limit="1"
						style="font-size: 10px" />
				</template>
			</el-form-item>
			<el-form-item label="背景图">
				<template slot-scope="scope">
					<image-upload v-model="siteContentFormData.configValue.firstScreen.bgImg" :limit="1"
						style="font-size: 10px" />
				</template>
			</el-form-item>
			<el-form-item label="主标题">
				<el-input v-model="siteContentFormData.configValue.firstScreen.mainTitle"></el-input>
			</el-form-item>
			<el-form-item label="文本">
				<el-input type="textarea" v-model="siteContentFormData.configValue.firstScreen.text"></el-input>
			</el-form-item>



			<el-form-item class="bannersMan" label="第二屏">
				<template slot-scope="scope">
					<el-table ref="singleTable" :data="siteContentFormData.configValue.secondScreen"
						highlight-current-row style="width: 100%">
						<el-table-column label="序号" type="index" width="120">
						</el-table-column>
						<!--              property="bannerImg" :tipInfo="'请上传1920x1080分辨率图片官网显示！'"-->
						<el-table-column label="主图">
							<template slot-scope="scope">
								<image-upload v-model="scope.row.mainImg" :limit="1" style="font-size: 10px" />
							</template>
						</el-table-column>

						<!-- :tipInfo="'请上传1920x1080分辨率图片官网显示！'" -->
						<el-table-column label="背景图">
							<template slot-scope="scope">
								<image-upload v-model="scope.row.bgImg" :limit="1" style="font-size: 10px" />
							</template>
						</el-table-column>
						<el-table-column label="主标题">
							<template slot-scope="scope">
								<el-input v-model="scope.row.mainTitle" placeholder="请输入主标题" clearable
									:style="{width: '100%'}">
								</el-input>
							</template>
						</el-table-column>
						<el-table-column label="文本">
							<template slot-scope="scope">
								<el-input type="textarea" v-model="scope.row.text" placeholder="请输入文本" clearable
									:style="{width: '100%'}">
								</el-input>
							</template>
						</el-table-column>

						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button type="danger" @click="deletelist(scope.row,scope.$index)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</template>
			</el-form-item>

			<div class="add" style="display: flex;justify-content: space-between;">
				<div class="l"></div>
				<el-button type="primary" @click="addlist">增加</el-button>
			</div>

			<!-- <el-form-item label="增加">

			</el-form-item> -->

			<el-form-item label="第三屏">
			</el-form-item>
			<el-form-item label="主图">
				<template slot-scope="scope">
					<image-upload v-model="siteContentFormData.configValue.thirdScreen.mainImg" :limit="1"
						style="font-size: 10px" />
				</template>
			</el-form-item>
			<el-form-item label="背景图">
				<template slot-scope="scope">
					<image-upload v-model="siteContentFormData.configValue.thirdScreen.bgImg" :limit="1"
						style="font-size: 10px" />
				</template>
			</el-form-item>
			<el-form-item label="主标题">
				<el-input v-model="siteContentFormData.configValue.thirdScreen.mainTitle"></el-input>
			</el-form-item>
			<el-form-item label="文本">
				<el-input type="textarea" v-model="siteContentFormData.configValue.thirdScreen.text"></el-input>
			</el-form-item>
			<el-form-item label="第四屏">

			</el-form-item>
			<el-form-item label="主标题">
				<el-input v-model="siteContentFormData.configValue.fourthScreen.mainTitle"></el-input>
			</el-form-item>
			<el-form-item label="主图">
				<template slot-scope="scope">
					<image-upload v-model="siteContentFormData.configValue.fourthScreen.mainImg" :limit="1"
						style="font-size: 10px" />
				</template>
			</el-form-item>

			<el-form-item class="bannersMan" label="">
				<template slot-scope="scope">
					<el-table ref="singleTable" :data="siteContentFormData.configValue.fourthScreen.newsList"
						highlight-current-row style="width: 100%">
						<el-table-column label="序号" type="index" width="120">
						</el-table-column>
						<!--              property="bannerImg" :tipInfo="'请上传1920x1080分辨率图片官网显示！'"-->
						<el-table-column label="主图">
							<template slot-scope="scope">
								<image-upload v-model="scope.row.mainImg" :limit="1" style="font-size: 10px" />
							</template>
						</el-table-column>

						<!-- :tipInfo="'请上传1920x1080分辨率图片官网显示！'" -->
						<el-table-column label="时间">
							<template slot-scope="scope">
								<div class="block">
								    <el-date-picker
								      v-model="scope.row.date"
								      type="date"
								      placeholder="选择日期">
								    </el-date-picker>
								  </div>
								<!-- <image-upload v-model="scope.row.bgImg" :limit="1" style="font-size: 10px" /> -->
							</template>
						</el-table-column>
						<el-table-column label="主标题">
							<template slot-scope="scope">
								<el-input v-model="scope.row.mainTitle" placeholder="请输入主标题" clearable
									:style="{width: '100%'}">
								</el-input>
							</template>
						</el-table-column>
						<el-table-column label="文本">
							<template slot-scope="scope">
								<el-input type="textarea" v-model="scope.row.text" placeholder="请输入文本" clearable
									:style="{width: '100%'}">
								</el-input>
							</template>
						</el-table-column>

						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button type="danger" @click="deletelists(scope.row,scope.$index)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</template>
			</el-form-item>

			<div class="add" style="display: flex;justify-content: space-between;">
				<div class="l"></div>
				<el-button type="primary" @click="addlists">增加</el-button>
			</div>

			<el-form-item>
				<el-button type="primary" @click="onSubmit">立即提交</el-button>
				<el-button>取消</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import siteApi from '@/api/team/site'
	import {
		MY_CONSTANT
	} from '@/utils/constants'
	export default {
		data() {
			return {
				siteContentFormData: {
					configId: '',
					configKey: MY_CONSTANT.siteConfigKeys.SITE_PAGE_CONTENT_CONFIG.configKey,
					configValue: {
						// teamDescription: '',
						// teamMission: '', 
						// teamPlan: '',
						// teamVision: '',
						// bannerTableData: [{
						//   bannerImg: '',
						//   mainTitle: '',
						//   subTitle: ''
						// },{
						//   bannerImg: '',
						//   mainTitle: '',
						//   subTitle: ''
						// },{
						//   bannerImg: '',
						//   mainTitle: '',
						//   subTitle: ''
						// },{
						//   bannerImg: '',
						//   mainTitle: '',
						//   subTitle: ''
						// }]
					}
				},
				form: {
					mainTitle: '',
					desc: '',
					mainImg: "",
					bgImg: ""
				}
			}
		},
		created() {
			this.getMainPageConfig()
		},
		methods: {
			addlists() {
				this.siteContentFormData.configValue.fourthScreen.newsList.push({
					subTitle: "",
					mainImg: "",
					mainTitle: "",
					text: "",
					date:''
				})
			},
			deletelists(row, index) {
				console.log(row, index)
				this.siteContentFormData.configValue.secondScreen.splice(index, 1)
			},
			deletelist(row, index) {
				console.log(row, index)
				this.siteContentFormData.configValue.secondScreen.splice(index, 1)
			},
			addlist() {
				this.siteContentFormData.configValue.secondScreen.push({
					bgImg: "",
					mainImg: "",
					mainTitle: "",
					text: ""
				})
			},
			getMainPageConfig() {
				// console.log('this.queryParams=>', this.queryParams)
				siteApi.selectConfigValueByConfigKey(this.siteContentFormData).then(data => {
					if (data.code === 200) {
						this.siteContentFormData = data.data
						this.siteContentFormData.configValue.secondScreen.push()
						// console.log('this.basicFormData=>', this.basicFormData)
					}
				}).catch(err => console.log(err))
			},
			onSubmit() {
				console.log('submit!');
				siteApi.addOrUpdateSiteConfig(this.siteContentFormData).then(data => {
					if (data.code === 200) {
						this.$modal.msgSuccess('更新成功！')
						this.getMainPageConfig()
						// this.siteContentFormData = data.data
						// console.log('this.basicFormData=>', this.basicFormData)
					}
				}).catch(err => console.log(err))
			}
		}
	}
</script>

<style>
</style>